<template>
	<el-drawer 
		v-model="dialogVisible" 
		:title="dialogTitle" 
		:before-close="closeDialog" 
		class="elDiaLog" 
		lock-scroll
		size="1000px"
		:close-on-click-modal="false" :close-on-press-escape="false">
			<div class="form-box" v-if="['act_progress'].includes(dialogStatus)" v-loading="loading">
				
				<el-tabs v-model="activeName" class="tabs-prog" @tab-click="handleClick">
				    <el-tab-pane label="前期手续进度" :name="1">
				
				        <el-timeline v-if="timelineData.length > 0">
				            <el-timeline-item v-for="(item, index) in timelineData"  :timestamp="item.add_time"
				                placement="top">
				                <el-descriptions direction="horizontal" :column="1" size="default" border>
				                    <el-descriptions-item label-class-name="cuslabel" label="操作人">
				                        {{ item.user.name }}
				                    </el-descriptions-item>
				                    <el-descriptions-item label-class-name="cuslabel" label="进度说明">
				                        {{ item.content ? item.content : "未填写" }}
				                    </el-descriptions-item>
				                    <el-descriptions-item label-class-name="cuslabel" label="图片" v-if="item.image.length > 0">
				                        <el-image v-for="(ite, ind) in item.image"
											lazy 
											class="imgCus"
				                            :src="ite.url"
				                            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
				                            :preview-src-list="imglist(item.image)" :initial-index="ind" fit="cover" />
				                    </el-descriptions-item>
				                    <el-descriptions-item label-class-name="cuslabel" label="附件" v-if="item.files.length > 0">
				                        <div v-for="(ite, ind) in item.files">
				                            <el-link type="primary" :href="ite.url">{{ ite.name }}</el-link>
				                        </div>
				                    </el-descriptions-item>
				
				                    <el-descriptions-item label-class-name="cuslabel" label="当前问题">
				                        {{ item.problem ? item.problem : "无" }}
				                    </el-descriptions-item>
				
				                </el-descriptions>
				            </el-timeline-item>
				
				        </el-timeline>
				        <el-empty v-else description="暂无内容" />
				    </el-tab-pane>
				    <el-tab-pane label="现场进度" :name="2">
				        <el-timeline v-if="timelineData2.length > 0">
				            <el-timeline-item v-for="(item, index) in timelineData2" :timestamp="item.add_time"
				                placement="top">
				                <el-descriptions direction="horizontal" :column="1" size="default" border>
				                    <el-descriptions-item label-class-name="cuslabel" label="操作人">
				                        {{ item.user.name }}
				                    </el-descriptions-item>
				                    <el-descriptions-item label-class-name="cuslabel" label="进度说明">
				                        {{ item.content ? item.content : "未填写" }}
				                    </el-descriptions-item>
				                    <el-descriptions-item label-class-name="cuslabel" label="图片" v-if="item.image.length > 0">
				                        <el-image v-for="(ite, ind) in item.image"
				                            style="width: 100px; height: 100px;margin-right: 10px;" :src="ite.url"
				                            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
				                            :preview-src-list="imglist(item.image)" :initial-index="ind" fit="cover" />
				                    </el-descriptions-item>
				                    <el-descriptions-item label-class-name="cuslabel" label="附件" v-if="item.files.length > 0">
				                        <div v-for="(ite, ind) in item.files">
				                            <el-link type="primary" :href="ite.url">{{ ite.name }}</el-link>
				                        </div>
				                    </el-descriptions-item>
				
				                    <el-descriptions-item label-class-name="cuslabel" label="当前问题">
				                        {{ item.problem ? item.problem : "无" }}
				                    </el-descriptions-item>
				
				                </el-descriptions>
				            </el-timeline-item>
				        </el-timeline>
				        <el-empty v-else description="暂无内容" />
				    </el-tab-pane>
				</el-tabs>
			
			
			</div>
			
	</el-drawer>


</template>
<script setup lang="ts">
	import { useRoute } from 'vue-router';
	import _ from 'lodash-es'
	import { useBaseConfigStore } from "@/store/modules/baseConfig";
	
	const baseConfigStore = useBaseConfigStore();

	import {
		
		getEngineeringSchedule
	} from "@/api/engine";

	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
		dialogTitle: {
			type: String,
			default: "添加信息"
		},
		dialogStatus: {
			type: String,
			default: "add_art"
		},
		dialogTableValue: {
			type: Object,
			default: () => { },
		},
		dialogTableType:{
			default:0
		}
	});
	
	const titModel = ref([{
		title: '待审核',
		type: 'info',
		value: 0
	}, {
		title: '已通过',
		type: 'success',
		value: 1
	}, {
		title: '已驳回',
		type: 'danger',
		value: 2
	}])
	const emit = defineEmits(['update:modelValue', 'initRefreshList']);
	const dialogVisible = ref(false);
	const loading = ref(false);//新增或者修改加载load按钮

	// 数据的data-ref
	const activeName = ref(1);
	watch(
		() => props.dialogTableValue,
		() => {
	
			if (props.dialogStatus == "act_progress") {
				let deepItem = _.cloneDeep(props.dialogTableValue)
				activeName.value = _.cloneDeep(props.dialogTableType)
				getAuditDetail(deepItem);
			}
		}, { deep: true, immediate: true })
	// 关闭弹窗
	function closeDialog() {
		emit('update:modelValue', false)
	}

	const timelineData: any = ref([]);
	const timelineData2: any = ref([]);

	// 获取详情
	function getAuditDetail(row) {
		loading.value =true
		getEngineeringSchedule({eid:row.id,type:1}).then((res) => {
		    timelineData.value = res.data;
		}).finally(() => {
		   loading.value =false
		})
		getEngineeringSchedule({eid:row.id,type:2}).then((res) => {
		    timelineData2.value = res.data;
		}).finally(() => {
		    loading.value =false
		})
		
	}
	//图片预览
	function imglist(list: any) {
	    return list.map(item => item.url);
	}
	// 切换选项卡
	const handleClick = (tab: any, event: Event) => {
	    console.log(tab.paneName, event)
	}

	


	onMounted(() => {
	
	});
</script>


<style lang="scss" scoped>
::v-deep .cuslabel {
    width: 100px !important;
}

::v-deep .el-timeline-item__timestamp {
    font-size: 18px;
    color: #409eff;
    font-weight: bold;
    margin-bottom: 16px;
    padding-top: 1px;
}
::v-deep .tabs-prog .el-tabs__header{
    margin-bottom: 30px;
}
.imgCus{
	width: 100px; 
	height: 100px;
	margin-right: 10px;
}


</style>